<!DOCTYPE html>
<html layout:decorate="~{layout}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>

    <title th:text="#{screen.consent.title}">Consent View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" type="text/css"/>

    <script th:inline="javascript">

        /*<![CDATA[*/
        var data = {
            attributes: /*[[${attributes}]]*/
        };

        alert(strings.info);

        function jqueryReady() {
            var consentjs = /*[[@{/js/consent.js}]]*/
                $.getScript(consentjs, function (data, textStatus, jqxhr) {
                });
        }

        /*]]>*/
    </script>

</head>

<body>
<main class="container mt-3 mb-3" role="main">
    <div layout:fragment="content">
        <h2 class="text-center" th:text="#{screen.consent.title}">Attribute Consent</h2>

        <div class="mdc-tab-bar" id="consent-tabs" role="tablist">
            <div class="mdc-tab-scroller">
                <div class="mdc-tab-scroller__scroll-area">
                    <div class="mdc-tab-scroller__scroll-content">
                        <button aria-selected="true" class="mdc-tab" role="tab">
                            <span class="mdc-tab__content">
                                <span class="mdc-tab__text-label"
                                      th:text="#{screen.consent.attributes}">Attributes</span>
                            </span>
                            <span class="mdc-tab-indicator">
                                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                            </span>
                            <span class="mdc-tab__ripple"></span>
                        </button>
                        <button aria-selected="true" class="mdc-tab" role="tab">
                            <span class="mdc-tab__content">
                                <span class="mdc-tab__text-label" th:text="#{screen.consent.options}">Options</span>
                            </span>
                            <span class="mdc-tab-indicator">
                                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                            </span>
                            <span class="mdc-tab__ripple"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <form class="mdc-card p-4 m-auto d-block mb-4" id="fm1" method="post" th:action="@{/login}">
            <section class="consent-tab" id="consent-tab-0">
                <div aria-labelledby="attributes-tab" class="" id="attributesPanel" role="tabpanel">
                    <p th:utext="#{screen.consent.attributes.header(${service.id})}">The following attributes will be
                        released to</p>


                    <div class="w-100 mdc-data-table mx-auto my-4" id="divAttributes">
                        <table class="mdc-data-table__table" id="attributesTable">
                            <thead>
                            <tr class="mdc-data-table__header-row">
                                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Attribute</th>
                                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Value(s)</th>
                            </tr>
                            </thead>
                            <tbody class="mdc-data-table__content">
                            <tr class="mdc-data-table__row" th:each="attribute : ${attributes}">
                                <td class="mdc-data-table__cell">
                                    <code>
                                        <span th:if="${attribute.friendlyName}" th:utext="${attribute.friendlyName}"/>
                                        <span th:unless="${attribute.friendlyName}" th:utext="${attribute.name}"/>
                                    </code>
                                </td>
                                <td class="mdc-data-table__cell"><code><span th:utext="${attribute.values}"/></code>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

            <section class="d-none consent-tab" id="consent-tab-1">
                <div class="mb-4">
                    <h3 class="bg-primary p-2 mdc-typography mdc-typography--headline6 mb-2"
                        th:text="#{screen.consent.options.header}">
                        How should I be prompted for consent again?
                    </h3>
                    <div class="mdc-check-help">
                        <div class="mdc-form-field">
                            <div class="mdc-radio">
                                <input class="mdc-radio__native-control"
                                       name="option"
                                       onclick="optionSelected()"
                                       id="optionAlways"
                                       type="radio"
                                       th:checked="${option == 0}"
                                       value="0"/>
                                <div class="mdc-radio__background">
                                    <div class="mdc-radio__outer-circle"></div>
                                    <div class="mdc-radio__inner-circle"></div>
                                </div>
                                <div class="mdc-radio__ripple"></div>
                            </div>
                            <label for="optionAlways" th:utext="#{screen.consent.options.always}">Always</label>
                        </div>
                        <div aria-hidden="true" class="mdc-typography mdc-typography--body2 pl-4 ml-4"
                             th:text="#{screen.consent.options.desc.always(${service.id})}">
                            This will be displayed on your public profile
                        </div>
                    </div>
                    <div class="mdc-check-help">
                        <div class="mdc-form-field">
                            <div class="mdc-radio">
                                <input class="mdc-radio__native-control"
                                       id="optionAttributeName"
                                       name="option"
                                       onclick="optionSelected()"
                                       type="radio"
                                       th:checked="${option == 1}"
                                       value="1">
                                <div class="mdc-radio__background">
                                    <div class="mdc-radio__outer-circle"></div>
                                    <div class="mdc-radio__inner-circle"></div>
                                </div>
                                <div class="mdc-radio__ripple"></div>
                            </div>
                            <label for="optionAlways" th:utext="#{screen.consent.options.attributename}">Always</label>
                        </div>
                        <div aria-hidden="true" class="mdc-typography mdc-typography--body2 pl-4 ml-4"
                             th:text="#{screen.consent.options.desc.attributename(${service.id})}">
                            This will be displayed on your public profile
                        </div>
                    </div>
                    <div class="mdc-check-help">
                        <div class="mdc-form-field">
                            <div class="mdc-radio">
                                <input class="mdc-radio__native-control"
                                       id="optionAttributeValue"
                                       name="option"
                                       onclick="optionSelected()"
                                       type="radio"
                                       th:checked="${option == 2}"
                                       value="2">
                                <div class="mdc-radio__background">
                                    <div class="mdc-radio__outer-circle"></div>
                                    <div class="mdc-radio__inner-circle"></div>
                                </div>
                                <div class="mdc-radio__ripple"></div>
                            </div>
                            <label for="optionAttributeName" th:utext="#{screen.consent.options.attributevalue}">Attribute
                                Value</label>
                        </div>
                        <div aria-hidden="true" class="mdc-typography mdc-typography--body2 pl-4 ml-4"
                             th:utext="#{screen.consent.options.desc.attributevalue.intro} +
                                '<ul><li>' +
                                #{screen.consent.options.desc.attributevalue.first(${service.id})} +
                                '</li><li>' +
                                #{screen.consent.options.desc.attributevalue.second(${service.id})} +
                                '</li><li>' +
                                #{screen.consent.options.desc.attributevalue.third(${service.id})} +
                                '</li><ul>'">
                            This will be displayed on your public profile
                        </div>
                    </div>

                </div>
                <div id="reminderPanel">
                    <h3 class="bg-primary p-2 mdc-typography mdc-typography--headline6 mb-2"
                        th:text="#{screen.consent.options.reminder.header}">
                        How often should I be reminded to consent again?
                    </h3>
                    <p class="mdc-typography mdc-typography--body2 mb-4"
                       th:text="#{screen.consent.options.reminder.expl(${service.id})}">
                        Show the consent screen, as a reminder, in the event that there is no change to the collection
                        of attributes released to {0}.
                    </p>
                    <div class="d-flex mt-2">
                        <div class="mdc-text-field  mr-2">
                            <input class="mdc-text-field__input" id="reminder" name="reminder" th:value="${reminder}"
                                   type="number">
                            <label class="mdc-floating-label" for="reminder">Reminder</label>
                        </div>
                        <select class="custom-select" id="reminderTimeUnit" name="reminderTimeUnit">
                            <option th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'seconds'}"
                                    th:text="#{screen.consent.options.timeunit.seconds}"
                                    value="seconds">Seconds
                            </option>
                            <option th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'minutes'}"
                                    th:text="#{screen.consent.options.timeunit.minutes}"
                                    value="minutes">Minutes
                            </option>
                            <option th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'hours'}"
                                    th:text="#{screen.consent.options.timeunit.hours}"
                                    value="hours">Hours
                            </option>
                            <option th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'days'}"
                                    th:text="#{screen.consent.options.timeunit.days}"
                                    value="days">Days
                            </option>
                            <option th:selected="${#strings.toLowerCase(reminderTimeUnit) == 'weeks'}"
                                    th:text="#{screen.consent.options.timeunit.weeks}"
                                    value="weeks">Weeks
                            </option>
                            <option th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'months'}"
                                    th:text="#{screen.consent.options.timeunit.months}"
                                    value="months">Months
                            </option>
                            <option th:selected="${#strings.toLowerCase(reminderTimeUnit)  == 'years'}"
                                    th:text="#{screen.consent.options.timeunit.years}"
                                    value="years">Years
                            </option>
                        </select>
                    </div>
            </section>
            </section>
            <section class="cas-section">
                <input name="execution" th:value="${flowExecutionKey}" type="hidden"/>
                <input name="_eventId" type="hidden" value="confirm"/>
            </section>
            <hr class="my-4"/>
            <section class="cas-section form-actions mt-4 d-flex justify-content-center">
                <button accesskey="l"
                        name="confirm"
                        class="mdc-button mdc-button--raised mr-2"
                        type="submit">
                    <span class="mdc-button__label" th:text="#{screen.consent.confirm}">Confirm</span>
                </button>
                <a class="mdc-button mdc-button--outlined" id="cancel" name="cancel"
                   th:href="@{/login}">
                    <span class="mdc-button__label" th:text="#{screen.consent.cancel}">Cancel</span>
                </a>
            </section>
        </form>

        <script th:inline="javascript" type="text/javascript">
            let div = document.querySelector('#divAttributes');
            new mdc.dataTable.MDCDataTable(div);
        </script>

    </div>
</main>
</body>
</html>
